<template>
    <div class="productIn-detail">
        <a-modal width="900px" :visible="visible" :title="modalOption.title" :dialog-style="{ top: '20px' }"
            @cancel="modalOption.onCancel" class="yuan-modal productIn-detail-modal">
            <a-spin tip="Loading..." :spinning="formLoading">
                <a-form-model layout="inline" class="yuan-form" :label-col="{ style: { width: '100px' } }"
                    :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">
                        <div class="form-panel-title">入库详情</div>
                        <div class="form-panel-box yuan-form-col5">
                            <a-form-model-item class="yuan-form-item" label="品名">
                                <span class="yuan-form-show">{{ infoData.varietyName }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="物料代码">
                                <span class="yuan-form-show">{{ infoData.materialCode }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="入库数量">
                                <span class="yuan-form-show">{{ infoData.practicalYield||0 }}{{infoData.unit}}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="入库批号">
                                <span class="yuan-form-show">{{ infoData.enterStorageBatch }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="入库类型">
                                <span class="yuan-form-show">{{ infoData.enterBankType }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="生产日期">
                                <span class="yuan-form-show">{{infoData.productionTime}}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="仓库">
                                <span class="yuan-form-show">{{infoData.warehouse}}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="生产批号">
                                <span class="yuan-form-show">{{ infoData.productionBatch }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="操作人">
                                <span class="yuan-form-show">{{ infoData.principal }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="产地">
                                <span class="yuan-form-show">{{ infoData.placeOfOrigin }}</span>
                            </a-form-model-item>
                        </div>
                    </div>
                </a-form-model>
            </a-spin>
            <template slot="footer">
                <a-button type="primary" @click="modalOption.onCancel">
                    关闭
                </a-button>
            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import nextApi, { ProductInListRes, ProListRes } from "@/api/nextApi";
import Upload from "@/components/upload.vue";
@Component({
    name: "ProductAdd",
    components: { Upload },
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: "" }) infoId!: string;
    @Prop({ default: "" }) type!: string;
    @Watch("visible")
    visibleChange() {
        if (this.visible) this.getDetail();
    }
    formLoading = false;
    modalOption = {
        title: "入库详情",
        onCancel: this.closeModal,
    };
    async mounted() {}
    closeModal() {
        this.$emit("closeModal");
    }
    infoData = {} as ProductInListRes;
    async getDetail() {
        this.formLoading = true;
        try {
            if (this.infoId) {
                const res = await nextApi.getInboundDetail({ id: this.infoId,type:this.type });
                this.infoData = { ...res.data };
            } else {
                this.infoData = {} as ProductInListRes;
            }
        } finally {
            this.formLoading = false;
        }
    }
}
</script>
<style lang="scss">
.productIn-detail-modal {
}
</style>
